import React, { FC, LegacyRef, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

interface IProps {
  data: any;
}

var baseTop = 20;
var gridHeight = 80;

function makeXAxis(gridIndex: number, opt?: any) {
  return echarts.util.merge(
    {
      type: 'time',
      gridIndex: gridIndex,
      axisLine: { onZero: false, lineStyle: { color: '#ddd' } },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false, lineStyle: { color: '#ddd' } },
      axisPointer: {
        lineStyle: { color: 'transparent' },
      },
    },
    opt || {},
    true
  );
}

function makeYAxis(gridIndex: number, opt: any) {
  return echarts.util.merge(
    {
      type: 'value',
      gridIndex: gridIndex,
      nameLocation: 'middle',
      nameTextStyle: {
        color: '#333',
      },
      boundaryGap: ['30%', '30%'],
      axisTick: { show: false },
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { show: false },
      splitLine: { show: false },
    },
    opt || {},
    true
  );
}

function makeGrid(top: number, opt?: any) {
  return echarts.util.merge(
    {
      top: top,
      height: gridHeight,
      left: 40,
      right: 20,
    },
    opt || {},
    true
  );
}

const LineChart: FC<IProps> = ({ data }) => {
  console.log('data: ', data);

  const container = useRef<HTMLDivElement | null>(null);
  const chart = useRef<echarts.ECharts | undefined>();

  useEffect(() => {
    if (!container.current) return;
    chart.current = echarts.init(document.getElementById('container'));
    const option = {
      toolbox: {
        show: true,
        right: 20,
        feature: {
          dataZoom: {
            yAxisIndex: "none"
          },
          dataView: {
          },
          restore: {},
          saveAsImage: {}
        }
      },
      tooltip: {
        trigger: 'axis',
        // backgroundColor: '#fff',
        // borderColor: 'rgba(0, 0, 200, 0.2)',
        // borderWidth: 1,
        // borderRadius: 0,
        // padding: 10,
        // formatter: function (params) {
        //   if (params.length) {
        //     params.unshift({
        //       seriesName: 'time',
        //       value: [null, Math.floor(params[0].value[0]) + ' ms'],
        //       color: '#5193f2',
        //     });
        //     return echarts.util
        //       .map(['time', 'cpu', 'cpu','memory'], function (seriesName) {
        //         for (var i = 0; i < params.length; i++) {
        //           var param = params[i];
        //           var style = 'color: ' + param.color;
        //           if (param.seriesName === seriesName) {
        //             return (
        //               '<span style="' +
        //               style +
        //               '">' +
        //               param.seriesName +
        //               '：</span><span style="' +
        //               style +
        //               '">' +
        //               param.value[1] +
        //               '</span>'
        //             );
        //           }
        //         }
        //       })
        //       .join('<br>');
        //   }
        // },
      },
      axisPointer: {
        link: [{ xAxisIndex: 'all' }],
        snap: true,
      },
      grid: [
        makeGrid(baseTop),
        makeGrid(baseTop + gridHeight),
        makeGrid(baseTop + gridHeight * 2),
      ],
      xAxis: [makeXAxis(0), makeXAxis(1), makeXAxis(2)],
      yAxis: [
        makeYAxis(0, {
          name: 'CPU',
        }),
        makeYAxis(1, {
          name: 'GPU',
        }),
        makeYAxis(2, {
          name: 'memory',
        }),
      ],
      dataZoom: [
        {
          type: 'slider',
          top: baseTop + gridHeight * 3 + 20,
          xAxisIndex: [0, 1, 2],
        },
        {
          type: 'inside',
          xAxisIndex: [0, 1, 2],
        },
      ],
      series: [
        {
          name: 'CPU',
          type: 'line',
          symbol: 'circle',
          symbolSize: 2,
          itemStyle: {
            normal: {
              color: '#5193f2',
            },
          },
          encode: {
            x: 'time',
            y: 'cpu',
          },
        },
        {
          name: 'GPU',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 1,
          symbol: 'circle',
          symbolSize: 2,
          itemStyle: {
            normal: {
              color: '#5193f2',
            },
          },
          encode: {
            x: 'time',
            y: 'gpu',
          },
        },
        {
          name: 'memory',
          type: 'bar',
          symbol: 'circle',
          symbolSize: 2,
          xAxisIndex: 2,
          yAxisIndex: 2,
          itemStyle: {
            normal: {
              color: '#75b228',
            },
          },
          encode: {
            x: 'time',
            y: 'mem',
          },
        },
        // // {
        // //   name: "frame",
        // //   type: "line",
        // //   symbol: "circle",
        // //   symbolSize: 2,
        // //   xAxisIndex: 2,
        // //   yAxisIndex: 2,
        // //   itemStyle: {
        // //     normal: {
        // //       color: "#e29304",
        // //     },
        // //   },
        // //   data: data.frame,
        // // },
        // {
        //   name: 'main',
        //   type: 'line',
        //   symbol: 'circle',
        //   symbolSize: 2,
        //   xAxisIndex: 3,
        //   yAxisIndex: 3,
        //   markArea: {
        //     itemStyle: {
        //       normal: {
        //         color: '#529bff',
        //       },
        //     },
        //     data: data.main,
        //   },
        // },
        // {
        //   name: 'main',
        //   type: 'line',
        //   symbol: 'none',
        //   symbolSize: 2,
        //   itemStyle: {
        //     normal: { color: 'transparent' },
        //   },
        //   xAxisIndex: 4,
        //   yAxisIndex: 4,
        //   data: data.fake,
        // },
      ],
    };
    chart.current.setOption(option);
  }, [container.current]);

  useEffect(() => {
    chart.current &&
      chart.current.setOption(
        {
          dimensions: ['time', 'mem', 'gpu', 'cpu'],
          dataset: {
            source: data,
          },
        },
        false,
        true
      );
  }, [data]);
  // const chart = useRef(
  //   new Chart({
  //     container: 'g2container',
  //     height: 300,
  //   })
  // );

  // useEffect(() => {
  //   chart.current
  //     .interval()
  //     .data([
  //       { genre: 'Sports', sold: 275 },
  //       { genre: 'Strategy', sold: 115 },
  //       { genre: 'Action', sold: 120 },
  //       { genre: 'Shooter', sold: 350 },
  //       { genre: 'Other', sold: 150 },
  //     ])
  //     .encode('x', 'genre')
  //     .encode('y', 'sold')
  //     .encode('color', 'genre');
  //   setTimeout(() => {
  //     chart.current.render();
  //   }, 1000);
  // }, []);
  //
  return (
    <div
      ref={container}
      style={{ width: '100%', height: '100%' }}
      id="container"
    ></div>
  );

  // useEffect(() => {
  //   if (!chart.current) return;
  //   chart.current.chart.changeData(data);
  //   setTimeout(() => {
  //     console.log('chart.current: ', chart.current);
  //   }, 1000);
  // }, [data]);
  //
  // return <Line {...config} ref={chart} />;
};

export default LineChart;
// export default React.memo(LineChart, (prevProps, nextProps) => {
//   return prevProps.data === nextProps.data;
// });
